// Container
.vpnColumns-container {
    display: flex;
    margin-bottom: 20px;
    margin-top: 40px;
}

// Columns
.vpnColumns-col { flex: 1 }
.vpnColumns-col:first-child { padding-top: 80px }
.vpnColumns-col > div:nth-child(even) { background-color: $light }

label.vpnColumns-col {
    cursor: pointer;
}

.vpnColumns-vpnbasic-col, .vpnColumns-vpnplus-col {
    margin-left: 7px;
    box-shadow: 0px 0px 0px 1px $border;
    border-radius: $border-radius;

    * {
        justify-content: center;
    }
}

.vpnColumns-label .fa {
    margin-left: 4px;
}

.vpnColumns-vpnbasic-selected .vpnColumns-vpnbasic-col { box-shadow: 0px 0px 0px 3px $vpnbasic }
.vpnColumns-vpnplus-selected .vpnColumns-vpnplus-col { box-shadow: 0px 0px 0px 3px $vpnplus }
.vpnColumns-col > * {
    align-items: center;
    display: flex;
    height: 35px;
    position: relative;
}

// Header
.vpnColumns-vpnbasic-title { color: $vpnbasic }
.vpnColumns-vpnplus-title { color: $vpnplus }
.vpnColumns-header {
    border-bottom: 1px solid $border;
    flex-direction: column;
    height: 80px;
}

.vpnColumns-selected {
    align-items: center;
    border-radius: $border-radius $border-radius 0 0;
    color: $white;
    display: flex;
    font-size: .9em;
    font-weight: bold;
    height: 25px;
    left: 0;
    position: absolute;
    text-transform: uppercase;
    top: -28px;
    width: 100%;
}

.vpnColumns-vpnbasic-col .vpnColumns-selected {
    background-color: $vpnbasic;
    box-shadow: 0px 0px 0px 3px $vpnbasic;
}
.vpnColumns-vpnplus-col .vpnColumns-selected {
    background-color: $vpnplus;
    box-shadow: 0px 0px 0px 3px $vpnplus;
}

.vpnColumns-vpnbasic-title,
.vpnColumns-vpnplus-title { font-size: 1.3em }

.vpnColumns-vpnbasic-amount,
.vpnColumns-vpnplus-amount {
    font-weight: bold;
    margin-left: 5px;
}

// Footer
.vpnColumns-footer {
    border-top: 1px solid $border;
    height: 45px;
}

.vpnColumns-footer button {
    background-color: $light;
    border-radius: 0 $border-radius;
    border: 0;
    font-weight: bold;
    height: 100%;
    width: 100%;
}

.vpnColumns-footer button:not([disabled]):hover,
.vpnColumns-footer button:not([disabled]):focus { opacity: 0.7 }

// .vpnColumns-vpnbasic-col button:first-child,
.vpnColumns-vpnplus-col button:first-child { color: $white }
// .vpnColumns-vpnbasic-col button:first-child { background-color: $vpnbasic }
.vpnColumns-vpnplus-col button:first-child { background-color: $vpnplus }

.vpnColumns-vpnbasic-selected .vpnColumns-vpnbasic-col button:first-child,
.vpnColumns-vpnplus-selected .vpnColumns-vpnbasic-col button:last-child,
.vpnColumns-vpnbasic-selected .vpnColumns-vpnplus-col button:last-child,
.vpnColumns-vpnplus-selected .vpnColumns-vpnplus-col button:first-child { display: none }

.vpnColumns-vpnplus-selected .vpnColumns-vpnbasic-col .vpnColumns-selected,
.vpnColumns-vpnbasic-selected .vpnColumns-vpnplus-col .vpnColumns-selected { display: none }
